<template>
  <div class="school_infs">
    <Row :gutter="20">
      <i-col :md="24" :lg="8" style="margin-bottom: 20px;">
        <Card shadow>
          <p slot="title">
            <span class="title_span"></span>
            <span class="title_font">当日幼儿出入园统计</span>
          </p>
          <Col class="statistics_box of">
            <div v-for="item in ioList" class="details_box" :style="{ border: '1px solid' + item.bg }">
              <div :style="{background: item.bg}" class="details_title">{{item.name}}</div>
              <div class="details_value" :style="{color: item.bg}">{{item.value}}</div>
            </div>
          </Col>
        </Card>
      </i-col>
      <i-col :md="24" :lg="10" style="margin-bottom: 20px;">
        <Card shadow>
          <p slot="title">
            <span class="title_span"></span>
            <span class="title_font">当日幼儿体检统计</span>
          </p>
          <Col class="statistics_box of">
            <div v-for="item in testList" class="details_box" :style="{ border: '1px solid' + item.bg }">
              <div :style="{background: item.bg}" class="details_title">{{item.name}}</div>
              <div class="details_value" :style="{color: item.bg}">{{item.value}}</div>
            </div>
          </Col>
        </Card>
      </i-col>
      <i-col :md="24" :lg="6" style="margin-bottom: 20px;">
        <Card shadow>
          <p slot="title">
            <span class="title_span"></span>
            <span class="title_font">家长统计情况</span>
          </p>
          <Col class="statistics_box of">
            <div v-for="item in kinsfolkList" class="details_box" :style="{ border: '1px solid' + item.bg }">
              <div :style="{background: item.bg}" class="details_title">{{item.name}}</div>
              <div class="details_value" :style="{color: item.bg}">{{item.value}}</div>
            </div>
          </Col>
        </Card>
      </i-col>
    </Row>
    <Row :gutter="20">
      <i-col :md="24" :lg="8" style="margin-bottom: 20px;">
        <Card shadow>
          <p slot="title">
            <span class="title_span"></span>
            <span class="title_font">当日教师考勤统计</span>
          </p>
          <Col class="teacher_statistics of">
            <div v-for="item in taList" class="teacher_sbox">
              <span :style="{background: item.bg}" class="statistics_value"></span>
              <span>{{item. name}} ： {{item.value}}</span>
            </div>
          </Col>
        </Card>
      </i-col>
      <i-col :md="24" :lg="16" style="margin-bottom: 20px;">
        <Card shadow>
          <p slot="title">
            <span class="title_span"></span>
            <span class="title_font">教师请假审核</span>
            <span class="more" @click="moreFn">更多</span>
          </p>
          <Table :height='180' no-data-text="无待审核请假" :columns="dataColumns" :data="dataTable"></Table>
        </Card>
      </i-col>
    </Row>
    <Row :gutter="20">
      <i-col :md="24" :lg="8" style="">
        <Card shadow>
          <p slot="title">
            <span class="title_span"></span>
            <span class="title_font">当月教师考勤统计</span>
          </p>
          <col>
          <div id="main" class="echart_box"></div>
        </Card>
      </i-col>
      <i-col :md="24" :lg="16" style="">
        <Card shadow>
          <p slot="title">
            <span class="title_span"></span>
            <span class="title_font">当月幼儿入园&体检统计</span>
          </p>
          <div class="echart_box">
            <Col>
              <div id="admission" class="echart_div"></div>
              <div id="temperature" class="echart_div"></div>
              <div id="ages" class="echart_div"></div>
              <div id="sexs" class="echart_div"></div>
            </Col>
          </div>
        </Card>
      </i-col>
    </Row>

    <Modal v-model="details.visible" :title="details.title" width="450" v-on:on-ok="AgreeBtn"
           v-on:on-cancel="DisagreeBtn" :mask-closable="false">
      <div style="line-height: 30px;font-size: 16px;height: 250px">
        <div>
          <Row>
            <div style="height: 80px">
              &nbsp;<strong>&nbsp;原因：</strong>{{details.form.reason}}
            </div>
            <div style="margin-top: 15px">
              &nbsp;<strong>审批：</strong>
              <RadioGroup v-model="details.form.status">
                <Radio label='1'>同意</Radio>
                <Radio label='2'>不同意</Radio>
              </RadioGroup>
            </div>
            <div style="margin-top: 10px">
              <strong> <label style="color: red">*</label> 意见：</strong>
              <Input v-model="details.form.judeContent" :readonly="!details.judge" type="textarea" :rows="3"
                     :autosize="{minRows: 3,maxRows: 5}" placeholder="审批意见"
                     style="width:80%;position: relative;top: 25px"></Input>
            </div>
          </Row>
        </div>
      </div>
      <div slot="footer" v-if="details.judge">
        <Button type="text" @click="DisagreeBtn">关闭</Button>
        <Button type="primary" @click="AgreeBtn" :loading="details.loading">审批</Button>
      </div>
    </Modal>
  </div>

</template>
<script>
  import API from "@/api/api";
  import echart from 'echarts';
  import InforCard from '@/components/info-card/infor-card';
  import CountTo from '@/components/count-to/count-to'

  export default {
    name: 'index',
    components: {
      InforCard,
      CountTo
    },
    data() {
      return {
        details: {
          title: '',
          visible: false,
          loading: false,
          judge: true,
          form: {
            id: '',
            reason: '',
            status: 0,
            judeContent: ''
          }
        },
        temperatureOption: {
          title: {
            text: '体检宝贝体温统计',
            subtext: '',
            x: 'center'
          },
          tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
          },
          legend: {},
          series: {
            name: '体温',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: [],
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          },
          color: ['#91c7ae', '#c23531']
        },
        monthPickOption: {
          title: {
            text: '宝贝出入园',
            subtext: '',
            x: 'center'
          },
          tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
          },
          legend: {},
          series: {
            name: '出入园',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: [],
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          },
          color: ['#91c7ae', '#c23531', '#d48265']
        },
        sexOption: {
          title: {
            text: '宝贝性别统计',
            subtext: '',
            x: 'center'
          },
          tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
          },
          legend: {},
          series: {
            name: '性别',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: [],
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        },
        ageOption: {
          title: {
            text: '年龄段统计',
            subtext: '',
            x: 'center'
          },
          tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
          },
          legend: {},
          series: {
            name: '年龄',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: [],
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        },
        teacherOption: {
          tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}: {c} ({d}%)"
          },
          legend: {
            orient: 'vertical',
            x: 'left',
            data: []
          },
          series:
            {
              name: '考勤',
              type: 'pie',
              radius: ['50%', '70%'],
              avoidLabelOverlap: false,
              label: {
                normal: {
                  show: false,
                  position: 'center'
                },
                emphasis: {
                  show: true,
                  textStyle: {
                    fontSize: '30',
                    fontWeight: 'bold'
                  }
                }
              },
              labelLine: {
                normal: {
                  show: false
                }
              },
              data: []
            }
        },
        dataTable: [],
        dataColumns: [{
          type: 'index',
          title: '序号',
          align: 'center',
          minWidth: 60
        },
          {
            title: '申请人',
            key: 'teacherName',
            minWidth: 100,
            align: 'center'
          },
          {
            title: '请假类型',
            key: 'leaveType',
            minWidth: 100,
            align: 'center'
          },
          {
            title: '开始时间',
            key: 'startTime',
            align: 'center',
            minWidth: 120
          },
          {
            title: '结束时间',
            key: 'endTime',
            align: 'center',
            minWidth: 120
          },
          {
            title: '操作',
            align: 'center',
            minWidth: 160,
            render: (h, params) => {
              let btn = [];
              let examineFn = h('Button', {
                props: {
                  type: 'info',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    this.examineFn(params.row)
                  }
                }
              }, '审核');
              btn.push(examineFn);
              return h('div', btn);
            }
          },
        ],
        taList: [],
        ioList: [],
        testList: [],
        kinsfolkList: [],
        infoCardData: [],
      };
    },
    methods: {
      fetchIndexStatics() {
        API.fetchIndexStatics().then(resp => {
          let data = resp.data;
          this.taList = data.todayTeacherStatics;
          this.ioList = data.todayPickStatics;
          this.testList = data.todayExamList;
          this.kinsfolkList = data.kinsfolkStatics;
          this.ageOption.series.data = data.monthAgeStatics;
          this.sexOption.series.data = data.monthSexStatics;
          this.temperatureOption.series.data = data.monthTemStatics;
          this.monthPickOption.series.data = data.monthPickStatics;
          this.teacherOption.series.data = data.monthTeacherStatics;
          this.teacherOption.series.data = data.monthTeacherStatics;
          this.teacherOption.legend.data = data.monthTeacherStatics.map(x => x.name);
          var myChart = echart.init(document.getElementById('main'));
          myChart.setOption(this.teacherOption);

          var myChart2 = echart.init(document.getElementById('ages'));
          myChart2.setOption(this.ageOption);

          var myChart3 = echart.init(document.getElementById('sexs'));
          myChart3.setOption(this.sexOption);

          var myChart4 = echart.init(document.getElementById('admission'));
          myChart4.setOption(this.monthPickOption);

          var myChart4 = echart.init(document.getElementById('temperature'));
          myChart4.setOption(this.temperatureOption);
        })
      },
      fetchTeacherLeave() {
        API.fetchTeacherLeave().then(resp => {
          let list = resp.data.records;
          list = list.filter(leave => leave.status === 0);
          this.dataTable = list;
        })
      },
      moreFn() {
        this.$router.push("/teacher-Leave")
      },
      examineFn(data) {
        this.details.visible = true;
        Object.assign(this.details, {
          visible: true,
          title: data.teacherName + '的请假',
        });
        Object.assign(this.details.form, data);
        if (data.status === 0) {
          this.details.judge = true;
          this.details.form.status = '1';
        } else {
          this.details.form.status = data.status + '';
          this.details.judge = false;
        }
      },
      AgreeBtn() {
        if (!this.details.form.judeContent) {
          this.$Message.warning('请输入审批意见！');
          return;
        }
        if (new Date(this.details.form.endTime).getTime() < new Date().getTime()) {
          this.$Message.warning('已过请假时间！');
          return;
        }
        this.details.loading = true;
        API.judgeTeacherLeave(this.details.form).then(res => {
          this.details.visible = false;
          this.fetchTeacherLeave();
        })
      },
      DisagreeBtn() {
        this.details.visible = false;
      },
    },
    created() {

    },
    mounted() {
      this.fetchIndexStatics();
      this.fetchTeacherLeave();
    }
  }
</script>
<style scoped>
  .school_infs {
    margin: 10px 0 0 0;
  }

  .title_span {
    display: inline-block;
    width: 6px;
    height: 100%;
    background: #01D18B;
    float: left;
    margin-right: 8px;
  }

  .statistics_box {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
  }

  .details_box {
    width: 100px;
    height: 100px;
    margin: 10px;
    border-radius: 10px;
  }

  .details_title {
    color: #fff;
    border-radius: 10px 10px 0 0;
    height: 36px;
    line-height: 36px;
  }

  .details_value {
    font-size: 40px;
    line-height: 64px;
  }

  .title_font {
    font-size: 20px;
  }

  .teacher_statistics {
    display: flex;
    flex-wrap: wrap;
    height: 180px;
  }

  .of {
    overflow: auto;
  }

  .teacher_sbox {
    font-size: 30px;
    font-weight: bold;
    width: 50%;
    display: flex;
    min-width: 200px;
    align-items: center;
  }

  .statistics_value {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 18px;
    border-radius: 50%
  }

  .echart_box {
    width: 100%;
    height: 220px;
  }

  .echart_div {
    width: 25%;
    height: 220px;
    float: left;
  }

  .more {
    display: inline-block;
    border-radius: 8px;
    width: 60px;
    height: 30px;
    color: #fff;
    text-align: center;
    line-height: 30px;
    background: #2db7f5;
    position: absolute;
    right: 10px;
    cursor: pointer;
  }
</style>
